<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>发圈</title>
	<!-- 引入Mui -->
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/pic_look.css">
	<!-- 引入公共样式 -->
    <link rel="stylesheet" href="css/public.css">
	<style>
        .mui-content{
            padding-bottom: 50px;
        }
        .text{
            background: #fff;
            padding: 10px;
        }
        .mui-table-view{
            margin-top: 20px;
        }
        .moeny{
            color: #f0ad4e;
        }
        #my_btn i:before{
            font-size: 1.2rem;
        }
        #my_btn .mui-btn{
            margin-left: 15%;
            margin-top: 20px;
        }
        #text_warp{
            opacity: 0;
            position: absolute;
            top: -999990px;
        }
        #shear{
            font-size: 14px;
            width: 94%;
            margin: 10px auto;
        }
	</style>
</head>
<body>
	<!-- 头部 -->
	<header id="header" class="mui-bar mui-bar-nav">
<!--		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
		<h1 class="mui-title">发圈</h1>
	</header>
    <!-- 头部 结束 -->
    <div class="mui-content">
        <!-- 文字信息开始 -->
        <div class="text">
            <h4>标题文字。标题文字。</h4>
            <p>案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本案例文本</p>
        </div>
        <!-- 文字信息结束 -->
        <!-- 图片展示结束 -->
        <div class="mui-table-view mui-grid-view">
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <div class="">
                    <img src="img/case1.jpg" data-preview-src data-preview-group='1' class="mui-media-object" id="pic_1">
                </div>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6">
                <div class="">
                    <img src="img/case2.jpg" data-preview-src data-preview-group='1' class="mui-media-object" id="pic_2">
                </div>
            </li>
        </div>
        <!-- 图片展示结束 -->
        <!-- 操作按钮开始 -->
        <div class="mui-row" id="my_btn">
            <div class="mui-col-xs-6 mui-col-sm-6">
                <div class="mui-btn mui-btn-primary" id="btnn" data-clipboard-text='这里放复制内容'>
                    <i class="mui-icon mui-icon-compose"></i>
                        复制分享语
                </div>
                <!-- <input type="text" readonly  value="这里是Android" id="text_warp"> -->
            </div>
            <div class="mui-col-xs-6 mui-col-sm-6">
                <div class="mui-btn mui-btn-primary" onclick="seve_pic()">
                    <i class="mui-icon mui-icon-download"></i>
                        保存图片方法
                </div>
            </div>
        </div>
        <!-- 操作按钮结束 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">转发计费：</li>
            <li class="mui-table-view-cell"><span class="moeny">2.00元 </span>/ 转发 需要上传截图</li>
        </ul>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">要求：</li>
            <li class="mui-table-view-cell">1.发布者需要分享2张海报和文字，并截图</li>
            <li class="mui-table-view-cell">2.分享2小时后上传分享截图</li>
            <li class="mui-table-view-cell">3.每天发两边</li>
            <li class="mui-table-view-cell">4.要求朋友圈所有人可见</li>
        </ul>
        <button class="mui-btn mui-btn-primary mui-btn-block" id="shear">请手动分享到微信朋友圈</button>
    </div>
    <!-- 底部Tab 开始 -->
	<nav class="mui-bar mui-bar-tab super_link">
		<a class="mui-tab-item " href="index.html">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" href="my_tasks.html">
			<span class="mui-icon mui-icon-email"></span>
			<span class="mui-tab-label">我的任务</span>
		</a>
		<a class="mui-tab-item mui-active" href="issue.html">
			<span class="mui-icon mui-icon-paperplane"></span>
			<span class="mui-tab-label">发圈</span>
		</a>
		<a class="mui-tab-item" href="shop.html">
			<span class="mui-icon mui-icon-chatbubble"></span>
			<span class="mui-tab-label">招商</span>
		</a>
		<a class="mui-tab-item" href="user.html">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">我的</span>
		</a>
    </nav>
    <!-- 底部Tab结束 -->
    <script src="js/jquery.min.js"></script> 
	<script src="js/mui.min.js"></script> 
    <script src="js/doT.js"></script>
    <script src="js/zoom.js"></script>
    <script src="js/mui.previewimage.js"></script>
    <script src="js/clipboard.min.js"></script>
    <!-- 以上为引入第三方插件 -->
    <script src="js/public.js"></script>
    <script>
        // 保存图片的方法提示
        function seve_pic(){
            mui.alert('点击图片后,可长按屏幕即可保存')
        };
        //点击复制文字 
        var btnn = document.getElementById('btnn');
        var clipboard = new ClipboardJS(btnn);
        clipboard.on('success', function(e) {
            mui.toast('已经复制到剪切板')
        });
        clipboard.on('error', function(e) {
            mui.toast('已经复制到剪切板')
        });
        //图片预览
        mui.previewImage();
    </script>
</body>
</html>